import React, { Component } from 'react'

export default class App extends Component {

    // 创建一个 ref 属性
    // createRef 该方法是用来创建一个 ref 用的
    inpRef = React.createRef()

    render() {
        return (
            <div>

                {/* <input type="text" ref={'inp'} /> */}

                <input type="text" ref={this.inpRef} />

                <button onClick={() => {
                    // 点击按钮获取输入框中输入的内容
                    // 可以通过设置 ref 来获取一个元素，但是直接设置 ref 的时候会告诉该方法被废弃了
                    // console.log(this.refs.inp.value);

                    // 通过 ref 属性获取到输入框的内容，.current 是固定写法
                    // 要想取出 ref 的内容就需要先 .current 下
                    console.log(this.inpRef.current.value);

                }} >获取输入的内容</button>

            </div>
        )
    }
}
